<template>
    <view class="fans-wrap">
        <!-- #ifdef APP  -->
        <u-navbar ref="navbar" :is-back="true" :back-text-style="{color: '#007aff'}" back-icon-color="#007aff"
            title-color="#007aff" title="关注列表"></u-navbar>
        <!-- #endif -->
        <!-- #ifdef H5  -->
        <u-navbar ref="navbar" :is-back="true" :back-text-style="{color: '#007aff'}" back-icon-color="#007aff"
            title-color="#007aff" title="关注列表"></u-navbar>
        <!-- #endif -->
        <template v-if="fansList && fansList.length > 0">
            <view class="fans-item" v-for="(item,index) in fansList" :key="index">
                <view class="left-wrap" @tap="toOthers(item.followUserId)" style="flex: 1;">
                    <view class="img-wrapinfo flex-center margin-right">
                        <image :src="item.followUserUrl" mode="aspectFill" class="avatar"></image>
                    </view>
                    <text>{{item.followUserName}}</text>
                </view>
                <view :class="['right-btn main-btn',item.isFollow ? 'active-btn' : '']" @tap="handleLike(item)">
                    {{item.isFollow ? '已关注' : '关注'}}</view>
            </view>
        </template>
        <template v-else>
            <y-Empty />
        </template>
    </view>
</template>

<script>
    import { jj } from '@/common/lib/fun.js'
    var that;
    export default {
        data() {
            return {
                fansList: []
            }
        },
        onLoad(options) {
            var t = this;
            // t.fansList = [{
            //     id: 2,
            //     avatar: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/avatar.png',
            //     name: '小黄吖',
            //     isFollow: true
            // }]
            t.$api.req_post('staff_grow/staff/stFollow/myFollowMeList', {
                pageNo: 1,
                userId: t.$cfg.user().id,
                pageSize: 1000
            }, 'form', false).then(res => {
                if (res.success) {
                    let tt = jj(res.result.records)
                    tt.map(a => {
                        a.isFollow = true
                    })
                    t.fansList = tt
                }
            })
            uni.setNavigationBarTitle({
                title: '关注'
            })
        },
        methods: {
            toOthers(id) {
                uni.navigateTo({
                    url: `/perPackages/pages/PerHomepage/PerHomepage?id=${id}`
                })
                // uni.navigateTo({
                //     url: './other'
                // })
            },
            handleLike(item) {
                var t = this
                if (item.isFollow) {
                    var obj = {
                        followUserId: t.$cfg.user().id,
                        userId: item.followUserId,
                    }
                    t.$api.req_post('staff_grow/staff/stFollow/cancel', obj, 'form', false).then(res => {
                        if (res.success) {
                            item.isFollow = !item.isFollow;
                        }
                    })
                } else {
                    var obj = {
                        followUserId: t.$cfg.user().id,
                        followUserNum: t.$cfg.user().userNum,
                        followUserName: t.$cfg.user().name,
                        followUserUrl: t.$cfg.user().userUrl,
                        userId: item.followUserId,
                        userName: item.name,
                        userNum: item.userNum,
                        userUrl: item.userUrl,
                    }
                    console.log(obj);
                    t.$api.req_post('staff_grow/staff/stFollow/add', obj, 'json').then(res => {
                        if (res.success) {
                            item.isFollow = !item.isFollow;
                        }
                    })
                }
                // let list = that.fansList
                // list.forEach(item => {
                //     if (item.id == id) {
                //         item.isFollow = !item.isFollow
                //     }
                // })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .fans-wrap {
        .fans-item {
            padding: 20rpx 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #FFFFFF;
            border-bottom: 1rpx solid #ececec;

            .left-wrap {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: var(--mainColor);

                .img-wrapinfo {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1rpx solid #ECECEC;

                    .avatar {
                        width: 100%;
                        height: 100rpx;
                    }
                }
            }

            .right-btn {
                width: 170rpx;
            }

            .main-btn {
                border-radius: 40upx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--mainColor);
                border: 1upx solid var(--mainColor);
                padding: 10rpx 40rpx;
            }

            .active-btn {
                color: #FFFFFF !important;
                background-color: var(--activeColor) !important;
                border: 1upx solid var(--activeColor) !important;
            }
        }
    }
</style>